const path = require("path");
const webpack = require("webpack");
//在内存中生成 html 界面
const htmlWebpackPlugin = require("html-webpack-plugin");
//这是一个配置文件 通过 nodejs 中的模块操作xiiang

const {VueLoaderPlugin}=require('vue-loader'); //是因为vue-loader，15的版本需要再添加plugin的配置

module.exports = {
  entry: path.join(__dirname, "./src/main.js"),
  output: {
    path: path.join(__dirname, "./dist"),
    filename: "bundle.js"
  },
  devServer: {
    //开发服务器
    contentBase: "src",
    port: 808080,
    compress: false, //服务器压缩
    open: true, //自动打开浏览器
    hot: true //热跟新必须开启和引入 webpack模块
  },
  mode: "development", //可以更改模式
  plugins: [
    new VueLoaderPlugin(),
    new webpack.HotModuleReplacementPlugin(), //热跟新开启
    new htmlWebpackPlugin({
      //在内存中生成 html 页面的插件
      template: path.join(__dirname, "./src/index.html"),
      filename: "index.html"
    })
  ],
  module: {
    //所有的第三方模块加载器
    rules: [
      //第三方模块加载规则
      { test: /\.css$/, use: ["style-loader", "css-loader"] }, //配置处理 css 文件
      { test: /\.less$/, use: ["style-loader", "css-loader", "less-loader"] },
      { test: /\.scss$/, use: ["style-loader", "css-loader", "sass-loader"] },
      { test: /\.(jpg|png|gif|jpeg|bmp)$/, use: "url-loader?limit=7631&name=[hash:8]-[name].[ext]" },
      //图片处理 可以传掺 控制大小 默认显示 besc64  limit值数限制图片的大小
      //name=[name].[ext] 打包是什么名就是什么名
      {test:/\.(ttf|eot|svg|woff|woff2)$/,use:'url-loader'},
      {test:/\.js$/,use:'babel-loader',exclude:/node_modules/},
      {test:/\.vue$/,use:'vue-loader'}
    ]
  },
  resolve:{
    alias:{ //
      'vue$':'vue/dist/vue.js' //webpack 导入 vue 包
    }
  }
};
